<template>
    <div class="home">
        <h1>欢迎来到首页</h1>
        <p>这是一个基于Vue的示例页面</p>
        <div class="input-container">
            <textarea
                v-model="userInput"
                placeholder="请输入您的问题..."
                class="question-input"
                :disabled="loading"
            ></textarea>
        </div>
        <div v-if="loading" class="loading">加载中...</div>
        <div v-if="error" class="error">{{ error }}</div>
        <div v-if="response" class="response">
            <h3>AI助手回复：</h3>
            <div class="response-content">{{ response }}</div>
        </div>
        <button @click="main" :disabled="loading || !userInput.trim()" class="send-button">发送请求</button>
    </div>
</template>

<script>
import OpenAI from "openai";

export default {
    name: 'HomePage',
    data() {
        return {
            openai: null,
            loading: false,
            error: null,
            response: null,
            userInput: ''
        }
    },
    created() {
        try {
            this.openai = new OpenAI({
                baseURL: 'https://api.deepseek.com/v1',
                apiKey: 'sk-108e2e35fa044395868dd2621959233f',
                dangerouslyAllowBrowser: true
            });
        } catch (error) {
            this.error = '初始化API失败：' + error.message;
        }
    },
    beforeDestroy() {
        this.openai = null;
    },
    methods: {
        async main() {
            if (!this.userInput.trim()) return;
            
            this.loading = true;
            this.error = null;
            this.response = null;

            try {
                const stream = await this.openai.chat.completions.create({
                    model: "deepseek-chat",
                    messages: [
                        { role: "system", content: "You are a helpful assistant." },
                        { role: "user", content: this.userInput }
                    ],
                    temperature: 0.7,
                    max_tokens: 1000,
                    stream: true
                });

                this.response = '';
                for await (const chunk of stream) {
                    const content = chunk.choices[0]?.delta?.content || '';
                    this.response += content;
                }
            } catch (error) {
                console.error('API请求错误:', error);
                this.error = '请求失败：' + (error.response?.data?.error?.message || error.message);
            } finally {
                this.loading = false;
            }
        }
    }
}
</script>

<style scoped>
.home {
    padding: 20px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

h1 {
    color: #2c3e50;
    margin-bottom: 20px;
}

p {
    color: #666;
    font-size: 18px;
}

.input-container {
    margin: 20px 0;
}

.question-input {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 16px;
    resize: vertical;
    margin-bottom: 10px;
}

.question-input:disabled {
    background-color: #f5f7fa;
    cursor: not-allowed;
}

.loading {
    margin-top: 20px;
    color: #409EFF;
}

.error {
    margin-top: 20px;
    color: #F56C6C;
}

.response {
    margin-top: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 8px;
    text-align: left;
}

.response h3 {
    color: #2c3e50;
    margin-bottom: 15px;
}

.response-content {
    white-space: pre-wrap;
    line-height: 1.6;
    color: #333;
}

.send-button {
    margin-top: 20px;
    padding: 12px 24px;
    background-color: #409EFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
}

.send-button:hover:not(:disabled) {
    background-color: #66b1ff;
}

.send-button:disabled {
    background-color: #a0cfff;
    cursor: not-allowed;
}
</style>